<template>
	<el-container class="home-container">
		<!-- 头部区域 -->
		<el-header>
			<div>
				<!-- <img src="../assets/heima.png"> -->
				<img style="width: 56px;height: 61px;" src="../assets/1618741789087_5BA64942-292D-4ee3-8EF1-25FAF625CB6C.png">
				<span>阳光招生管理系统</span>
			</div>
			<el-dropdown style="padding-right: 20px;" class="el-dropdown" @command="handleCommand">
				<span class="el-dropdown-link">
					{{name}}<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="Edit">修改密码</el-dropdown-item>
					<el-dropdown-item command="signout">安全退出</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</el-header>
		<!-- 页面主体区域 -->
		<el-container>
			<!-- 侧边栏 -->
			<el-aside class="aside" :width="isCollapse ? '64px' : '200px'">
				<div class="toggle-button" @click="toggleCollapse">|||</div>
				<!-- 侧边栏菜单区域 -->
				<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eFF" unique-opened
					:collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">
					<!-- 一级菜单 -->
					<el-submenu :index="item.Id+''" v-for="item in menulist" :key="item.Id">
						<!-- 一级菜单的模板区域 -->
						<template slot="title">
							<!-- 图标 -->
							<i :class="iconsObj[item.Id]"></i>
							<!-- 文本 -->
							<span>{{item.Name}}</span>
						</template>
						<!-- 二级菜单 -->
						<el-menu-item v-if="subItem.ParentId==item.Id" :index="'/'+subItem.Path"
							v-for="subItem in menulist2" :key="subItem.Id" @click="saveNavState('/'+subItem.Path)">
							<template slot="title">
								<!-- 图标 -->
								<i class="el-icon-menu"></i>
								<!-- 文本 -->
								<span>{{subItem.Name}}</span>
							</template>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<!-- 右侧内容主体 -->
			<el-main>
				<!-- 路由站位符 -->
				<!-- 修改密码 -->
				<el-dialog title="修改密码" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
					<el-form :rules="addFormRules" ref="addFormRef" label-width="100px" :model="passwords">
						<el-form-item label="旧密码" prop="OldPassword">
							<el-input type="password" v-model="passwords.OldPassword" autocomplete="off"></el-input>
						</el-form-item>
							<el-form-item label="新密码" prop="NewPassword">
								<el-input type="password" v-model="passwords.NewPassword" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="确认新密码" prop="RefPassword">
								<el-input type="password" v-model="passwords.RefPassword" autocomplete="off"></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="EditPwd">确 定</el-button>
						</div>
				</el-dialog>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			
			//确认密码
			var checkPassword = (rule, value, cb) => {
				if (this.passwords.NewPassword == value) {
					//合法的邮箱
					return cb()
				}
				cb(new Error('两次密码不一致'))
			}
			return {
				//左侧菜单数据
				menulist: [],
				menulist2: [],
				iconsObj: {
					'1': 'iconfont icon-user',
					'2': 'iconfont icon-tijikongjian',
					'3': 'iconfont icon-shangpin',
					'4': 'iconfont icon-danju',
					'5': 'iconfont icon-baobiao',
					'6': 'iconfont icon-user',
					'7': 'iconfont icon-tijikongjian',
					'8': 'iconfont icon-shangpin',
					'9': 'iconfont icon-danju',
					'10': 'iconfont icon-baobiao',
					'11': 'iconfont icon-baobiao'
				},
				//是否折叠
				isCollapse: false,
				//被激活的链接地址
				activePath: '',
				name: '',
				dialogFormVisible: false,
				passwords: {
					Id:parseInt(window.sessionStorage.getItem('token')),
					OldPassword:'',
					NewPassword:'',
					RefPassword:''
				},
				//添加表单的验证规则对象
				addFormRules:{
					OldPassword:[
						{required:true,message:'请输入密码',tigger:'blur'},
						{
							min:6,
							max:15,
							message:'用户名的长度在6~15个字符之间',
							tigger:'blur',
						}
					],
					NewPassword:[
						{required:true,message:'请输入密码',tigger:'blur'},
						{
							min:6,
							max:15,
							message:'用户名的长度在6~15个字符之间',
							tigger:'blur',
						}
					],
					RefPassword:[
						{required:true,message:'请输入密码',tigger:'blur'},
						{
							min:6,
							max:15,
							message:'用户名的长度在6~15个字符之间',
							tigger:'blur',
						},
						{validator:checkPassword,tigger:'blur'}
					]
				}
				
			}
		},
		created() {
			this.getMenuList(),
				this.activePath = window.sessionStorage.getItem('activePath')
		},
		methods: {
			handleCommand(command) {
				if (command == "signout") {
					window.sessionStorage.clear()
					this.$router.push('/login')
					this.$message.success("退出登录！")
				} else if (command == "Edit") {
					this.dialogFormVisible = true
				}
			},
			async getMenuList() {
				const {
					data: res
				} = await this.$http.post('api/Menu/GetMenu', {
					Id: parseInt(window.sessionStorage.getItem('token'))
				});

				this.menulist = res.data1;
				this.menulist2 = res.data2;
				this.name = res.username;
			},
			//点击按钮，切换菜单的折叠与展开
			toggleCollapse() {
				this.isCollapse = !this.isCollapse
			},
			//保存链接的激活状态
			saveNavState(activePath) {
				// 设置一个sessionstorage 的key值 activepath
				window.sessionStorage.setItem('activePath', activePath)
				this.activePath = activePath
			},
			EditPwd(){
				this.$refs.addFormRef.validate(async valid=>{
					//console.log(valid)
					if(!valid) return
					//可以发起添加用户的网络请求
				    const {data:res}=await this.$http.post('api/Menu/EditPwd',this.passwords)
				    if(res.code==0){
						//隐藏添加用户的对话框
						this.addDialogVisible=false
						window.sessionStorage.clear()
						this.$router.push('/login')
						this.$message.success("修改密码成功！")
					}else{
						this.$message.error(res.msg)
					}
					
				})
			}
		}
	}
</script>

<style Lang="less">
	.home-container {
		height: 100%;
	}

	.el-header {
		background-color: #373d41;
		display: flex;
		justify-content: space-between;
		padding-left: 0px;
		align-items: center;
		color: #fff;
		font-size: 20px;
	}

	.el-header>div {
		display: flex;
		align-items: center;
	}

	.el-header div span {
		margin-left: 15px;
	}

	.aside {
		background-color: #333744;
	}

	.aside .el-menu {
		border-right: none;
	}

	.el-main {
		
		
		background-size: 100% 100%;
	}

	.iconfont {
		margin-right: 10px;
	}

	.toggle-button {
		background-color: #4A5064;
		font-size: 10px;
		line-height: 24px;
		color: #fff;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer;
	}
</style>
